<template>
	<view class="content">
		<uni-notice-bar :speed="40" background-color="#66cccc" color="#fff" showIcon="true" scrollable="true"
			single="true" :text="text"></uni-notice-bar>
		<view class="vaccine" v-for="item in vaccineList" :key='item.id'>
			<view class="vaccine_left">
				九价hpv疫苗
			</view>
			<view class="vaccine_right">
				<view class="vaccine_right_title">
					{{item.vaccineTitle}}
					<text>({{item.descption}})</text>
				</view>
				<view class="countdown">
					<!-- <text v-if="isShow(item.startTime,item.time)">开始抢购</text> -->
					<text style="font-size: 26rpx;">{{item.startTime}} 开始抢购</text>
				</view>
				<view class="countdown">
					￥:{{item.price}}人民币
				</view>
				<view class="vaccine_right_info">
					<view class="vaccine_right_sum">
						数量:<text>&nbsp;{{item.num}}</text>
					</view>
					<!-- :disabled="!isShow(item.startTime,item.time)" -->
					<button @click="hanleToDetail(item)" class="vaccine_right_shop" type="default">立即抢购</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vaccineList: [],
				timer: null,
				flag: false,
				currentTime: '',
				queryInfo: {
					pagenum: 1,
					pagesize: 1000
				},
				text: ''
			}
		},
		onLoad() {
			this.getSecKill()
			this.getAllNotice()

		},
		onShow() {
			// this.a()
		},
		onHide() {
			clearInterval(this.timer)
		},
		computed: {
			isShow() {
				return (startTime, time) => {
					return this.comPare(startTime, time)
				}
			}
		},
		methods: {
			getAllNotice() {
				uni.$http
					.post(
						`/user-server/api/notice/v1/listAll?page=${this.queryInfo.pagenum}&&size=${this.queryInfo.pagesize}`
					)
					.then(response => {
						const a = response.data.data.current_data.length
						this.text = response.data.data.current_data[a - 1].title

					})
			},
			hanleToDetail(item) {
				uni.navigateTo({
					url: '../detail/detail'
				})
				this.$store.commit('m_user/updateVaccine', item)

			},
			getSecKill() {
				uni.$http.post('/order-server/api/skipe/v1/listAll').then(res => {
					this.vaccineList = res.data.data
					// console.log(this.vaccineList)
				})
			},
			timeup() {},
			comPare(time, minute) {

				// let currentTime = new Date()
				let dt2 = new Date(time);
				let min = dt2.getMinutes();
				dt2.setMinutes(min + minute);
				if (Date.parse(time) < Date.parse(this.currentTime) && Date.parse(this.currentTime) <= Date.parse(dt2)) {
					return true
				} else {
					return false
				}
			},
			a() {
				clearInterval(this.timer)
				// this.currentTime = new Date()
				const date = new Date();

				this.timer = setInterval(() => {
					// const date=new Date();
					this.currentTime = new Date()
					console.log(this.currentTime)
				}, 1000)
			}
		}
	}
</script>

<style scoped lang="less">
	.countdown {
		background-color: #ffffff;
		display: flex;
		padding: 10rpx 0;
		justify-content: center;
	}

	.content {
		// height: 100vh;
	}

	.vaccine {
		display: flex;
		width: 100%;
		height: 300rpx;
		padding: 20rpx;
	}

	.vaccine_left {
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #aaaaff;
	}

	.vaccine_right {
		width: 60%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background-color: #d3d3d3;
	}

	.vaccine_right_title {
		text-align: center;
		color: #FFFFFF;
		font-size: 40rpx;
		font-weight: bold;
	}

	.vaccine_right_info {
		display: flex;
		// justify-content: space-between;
		// align-items: center;
	}

	.vaccine_right_sum {
		background-color: #00CE47;
		height: 80rpx;
		line-height: 80rpx;
		flex:1;
		text-align: center;
	}

	.vaccine_right_shop {
		background-color: #ff557f;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		flex:1;
		border-radius: 10rpx;
	}
</style>
